<template>
  <div class="login-container">
    <vue-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" labvue-position="left">
      <div class="title-container">
        <h3 class="title">{{ $t('menu.login.title') }}</h3>
        <lang-select class="select-language" :languages="languages"></lang-select>
      </div>
      <vue-form-item prop="username">
        <span class="icon-container">
          <i class="vue-icon-user"></i>
        </span>
        <vue-input
          v-model="loginForm.username"
          :placeholder="$t('menu.login.username')"
          name="username"
          type="text"
          auto-complete="on"
        ></vue-input>
      </vue-form-item>
      <vue-form-item prop="password">
        <span class="icon-container">
          <i class="vue-icon-key"></i>
        </span>
        <vue-input
          :type="passwordType"
          v-model="loginForm.password"
          :placeholder="$t('menu.login.password')"
          name="password"
          auto-complete="on"
          @keyup.enter.native="handleLogin" ></vue-input>
        <span class="show-pwd" @click="showPwd">
          <i class="vue-icon-keyboard"></i>
        </span>
      </vue-form-item>
      <vue-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">{{ $t('menu.login.logIn') }}</vue-button>
      <div class="tips">
        <span>{{ $t('menu.login.username') }} : admin</span>
        <span>{{ $t('menu.login.password') }} : {{ $t('menu.login.any') }}</span>
      </div>
      <div class="tips">
        <span style="margin-right:18px;">{{ $t('menu.login.username') }} : editor</span>
        <span>{{ $t('menu.login.password') }} : {{ $t('menu.login.any') }}</span>
      </div>
    </vue-form>
  </div>
</template>

<script>
function isvalidUsername(str) {
  var valid_map = ['admin', 'editor'];
  return valid_map.indexOf(str.trim()) >= 0;
}

module.exports = {
  name: 'Login',
  data: function() {
    var validateUsername = function(rule, value, callback) {
      if (!isvalidUsername(value)) {
        callback(new Error('Please enter the correct user name'));
      } else {
        callback();
      }
    };
    var validatePassword = function(rule, value, callback) {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: 'admin',
        password: '1111111'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      loading: false,
      showDialog: false,
      redirect: undefined,
      languages: [{
        code: 'zh',
        name: '中文'
      }, {
        code: 'ja',
        name: '日语'
      }, {
        code: 'en',
        name: 'English'
      }]
    };
  },

  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }

  },

  methods: {
    showPwd: function() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
    },
    handleLogin: function() {
      var self = this;

      this.$refs.loginForm.validate(function (valid) {
        if (valid) {
          self.loading = true;
          MenuStore.dispatch('LoginByUsername', self.loginForm).then(function () {
            self.loading = false;
            self.$router.push({ path: self.redirect || '/' });
          }).catch(function (error) {
            self.loading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>